*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
}
.on{
    background-color:coral;
}
.container{
    position: absolute;
    left:50%;
    top:50%;
    width:600px;
    height:350px;
    margin-left:-300px;
    margin-top:-175px;
    overflow: hidden;
    border:5px solid brown;
    border-radius: 30px;
    cursor:pointer;
}
.container .imgList{
   width:4200px;
   position: absolute;
   left:-600px;
}
.container .imgList img{
    width:600px;
    height:350px;
    float:left;
}
.container .quanList{  
    position: absolute;
    left:50%;
    margin-left:-50px;
    bottom:20px;
}
.container .quanList div{
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px whitesmoke solid;
    box-sizing: border-box;
    float:left;
    margin-right:10px;
    cursor: pointer;
}
.container .left,.container .right{
   position: absolute;
   width:50px;
   height:50px;
   color:black;
   font-size:40px;
   font-weight:bolder;
   background-color:wheat;
   opacity:0.5;
   cursor:pointer;
   text-align:center;
   line-height: 50px;
}
.container .left{
    left:0px;
    top:50%;
    margin-top:-25px;
}
.container .right{
    right:0px;
    top:50%;
    margin-top:-25px;
}